<template>
    <view class="page" :style="{'--color': color}">
        <status-bar :title='config.title'></status-bar>
        <view class="filterArea bgwhite" :style="{top: totalHeight + 'px'}">
            <scroll-view class="scroll-row" scroll-x :scroll-into-view="'view' + date" scroll-with-animation>
				<view :id="'view' + item.scanData" class="date m-right10" :class="{'thmeBg': date == item.scanData, 'm-right110': index == dateList.length - 1}" v-for="(item,index) in dateList" :key="index"
					@click="handleQuery({date: item.scanData})">
					<view class="size28" :class="date == item.scanData ? 'white' : 'color_33'">{{ item.w }}</view>
					<view class="h6" :class="date == item.scanData ? 'white' : 'color_99'">{{ item.title }}</view>
				</view>
			</scroll-view>
			<scroll-view class="scroll-row m-top40" scroll-x>
				<view class="type color_66" :class="{'active': id == item.id}" @click="handleQuery({id: item.id})" v-for="(item,index) in typeList" :key="index">{{ item.name }}</view>
			</scroll-view>
			<view class="calendar bgwhite p-ab" @click="showCalendar = true">
				<text class="iconfont icon-qiandao size36 color_99"></text>
				<view class="h6 color_99">选择</view>
			</view>
        </view>
		<view class="padding24 m-top200">
			<view class="card" @click="toDetail(item)" v-for="(item,index) in list" :key="index">
				<image class="img" :src="$imgUrls(item.img)" mode="aspectFill"></image>
				<view class="flex-1 p-left20">
					<view class="info">
						<view class="size28 color_33 bold ellipsis_2">{{ item.name }}</view>
						<view class="d-flex a-center m-top10" v-if="item.timeLabel">
							<block v-for="(subItem,subIndex) in item.timeLabel" :key="subIndex">
								<view class="h6 color_66">{{ subItem }}</view>
								<view class="divider" v-if="subIndex < item.timeLabel.length - 1"></view>
							</block>
						</view>
					</view>
					<view class="d-flex a-end">
						<view class="flex-1">
							<text class="h6 thmeColor bold">￥</text>
							<text class="size34 thmeColor bold">{{ parseFloat(item.price) }}</text>
							<text class="h6 color_B3 line-through m-left4" v-if="parseFloat(item.full_price) > parseFloat(item.price)">￥{{ parseFloat(item.full_price) }}</text>
						</view>
						<view class="btn flexac thmeBg size28 white" v-if="item.status == 1">预约</view>
						<view class="btn flexac size28 white" v-else>已约满</view>
					</view>
				</view>
			</view>

			<empty cat='4' v-if="noData" msg='暂未开放预约档期哦~'></empty>
		</view>

		<view class="float-nav" @click.stop="$common.Tel(config.phone)" v-if="config.phone">
			<view class="item bgwhite bor_radius flexac">
				<text class="iconfont icon-dianhua size42 thmeColor"></text>
			</view>
		</view>

		<u-calendar :show="showCalendar" mode="single" :showTitle="false" :color="color" :customList="customList" :defaultDate="date" closeOnClickOverlay @close="showCalendar = false" @confirm="confirm"></u-calendar>
    
		<showModel @cancelFunc='showModal=false' goHome='0' v-if='showModal' type='2'></showModel>
	</view>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
		data() {
			return {
				config: '',
				dateList: [],
				date: '', // 日期
				customList: [],
				typeList: [],
				id: 'all', // 分类id
				list: [],
				page: 1,
				limit: 10,
				noData: false,
				noMore: false,
				showCalendar: false,
				showModal: false
			}
		},
        computed: {
            ...mapState(['color', 'totalHeight', 'vid'])
        },
		onLoad() {
			this.getConfig()
		},
		methods: {
			getConfig() {
				this.$http.post({
					url: '/goodsSubscribeApi/getConfig'
				}).then(res => {
					if(res.errcode != 100) return this.$Toast(res.msg)
					this.config = res.data.config || ''
					this.dateList = res.data.date || []
					this.typeList = res.data.classify || []
					if(this.dateList.length) this.date = this.dateList[0].scanData
					this.customList = this.dateList.map(item => item.scanData)
					this.getList()
				})
			},
			getList() {
				this.$showLoading('')
				this.noData = false
				this.noMore = false
				this.$http.post({
					url: '/goodsSubscribeApi/getGoodsList',
					data: {
						date: this.date,
						id: this.id,
						page: this.page,
						limit: this.limit
					}
				}).then(res => {
					this.$hideLoading()
					if(res.errcode != 100) return this.$Toast(res.msg)
					let result = res.data || []
					this.list = this.page == 1 ? result : this.list.concat(result)
					if(!this.list.length) this.noData = true
					if(result.length < this.limit) this.noMore = true
				})
			},
			handleQuery(item) {
				if(item.date) this.date = item.date
				if(item.id) this.id = item.id
				this.page = 1
				this.getList()
			},
			confirm(e) {
				this.date = e[0]
				this.page = 1
				this.getList()
				this.showCalendar = false
			},
			toDetail(item) {
				if(!this.vid) return this.showModal = true
				this.toUrl('/orderPage/order/submitReserve?goods_id=' + item.goods_id + '&scanDate=' + this.date)
			}
		},
		onReachBottom() {
			if(this.noMore) return
			this.page ++
			this.getList()
		}
    }
</script>

<style lang="scss" scoped>
    .page {
        background-color: #f5f5f5;
    }
    .filterArea {
        width: 100%;
        height: 200rpx;
        position: fixed;
        left: 0;
        z-index: 1;
		padding: 0 24rpx;
    }
	.date {
		display: inline-block;
		text-align: center;
		padding: 10rpx 12rpx;
		border-radius: 10rpx;
	}
	.type {
		display: inline-block;
		padding: 8rpx 24rpx;
		background: #f7f7f7;
		border-radius: 4rpx;
		margin-right: 24rpx;
		&.active {
			background: #ededed;
			color: var(--color);
			font-weight: bold;
		}
	}
	.calendar {
		width: 108rpx;
		padding: 10rpx 0;
		text-align: center;
		box-shadow: -4px 0px 4px rgba(0,0,0,.06);
		right: 0;
		top: 0;
	}
	.card {
		background: #fff;
		border-radius: 10rpx;
		box-shadow: 0 2px 4px rgba(0,0,0,.06);
		padding: 24rpx;
		margin-bottom: 24rpx;
		display: flex;
		.img {
			width: 170rpx;
			height: 170rpx;
			border-radius: 10rpx;
		}
		.info {
			min-height: 116rpx;
		}
		.divider {
			width: 2rpx;
			height: 24rpx;
			background: #eaeaec;
			margin: 0 10rpx;
		}
		.btn {
			width: 130rpx;
			height: 54rpx;
			background: #E6E6E6;
			border-radius: 30rpx;
		}
	}
	.float-nav {
		position: fixed;
		right: 20rpx;
		bottom: calc(200rpx + constant(safe-area-inset-bottom));
        bottom: calc(200rpx + env(safe-area-inset-bottom));
		z-index: 1;
		.item {
			width: 80rpx;
			height: 80rpx;
			box-shadow: 0 4rpx 16rpx 0 rgba(0,0,0,.16);
		}
	}
</style>